<template>
  <div>
    <div>
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="最近" name="first"> 1 </el-tab-pane>
          <el-tab-pane label="文章" name="second">


            <div class="MyArticleCard" v-for="item in MyArticle" :key="item.id">
              <MyArticleCard :msg="item"></MyArticleCard>
            </div>

            
          </el-tab-pane>
          <el-tab-pane label="资源" name="third">3</el-tab-pane>
          <el-tab-pane label="评论" name="fourth">4</el-tab-pane>
          <el-tab-pane label="帖子" name="fifth">5</el-tab-pane>
          <el-tab-pane label="收藏" name="sixth">6</el-tab-pane>
          <el-tab-pane  >
            <span slot="label"  >
              <el-input
                clearable
                placeholder="请输入内容"
                class="input-with-select"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  type="primary"
                ></el-button>
              </el-input>
            </span>


          </el-tab-pane>
        </el-tabs>
      </div>
     
    </div>
  </div>
</template>

<script>
import MyArticleCard from "./MyArticleCard.vue";
import { findUserArticle } from "@/api/article";
import {getToken} from '@/request/token'
import {getUserInfo} from '@/api/user'
export default {
  data() {
    return {
      activeName: "second",
      MyArticle : [],
      userId:''

     
    };
  },
  created() {
    const token=getToken();
    if(token!=null){
    getUserInfo(token).then(res=>{
      if(!res.success){
        return  this.$message.error('未登录');
      }else{
        
        this.userId=res.data.id
       
        findUserArticle(this.userId).then((res) => {
      this.MyArticle = res.data;
    });
      
      }
      
    })
  }
  
    
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
  components: {
    MyArticleCard,
  },
};
</script>

<style scoped lang="less">
.el-collapse {
  border: 0;
}
/deep/[data-v-e205f810] .el-collapse-item__header  {
  width: 100%;
}
/deep/.el-collapse-item__header {
  font-size: 12px;
  height: 12px;
  margin-top: 2px;
  background-color: rgb(251, 251, 251);
  border: 0;
  width: 100px;
}
/deep/.el-collapse-item__content {
  font-size: 4px;
  padding-bottom: 5px;
  background-color: rgb(251, 251, 251);
}
.tabs {
  width: 100%;
}
/deep/.el-tabs__item:nth-child(8) {
  width: 350px;
}
.MyArticleCard {
  margin-bottom: 5px;
}

</style>